<template>
    <div class="keppel">
        <div class="personal" v-show="ispersonal">
            <div class="personalTit">
                <img src="http://assets.rurushishi.com/activies/tjkeppel/personel.png" alt="">
            </div>
            <div class="personalImg">
                <img :src="personalImg" alt="">
            </div>
            <p>以下好友为你投过票</p>
            <div class="perFriendList">
                <div class="rank">
                    <ul
                            v-infinite-scroll="loadMore"
                            infinite-scroll-disabled="loading"
                            infinite-scroll-distance="20">
                        <li v-for="(item, index) in rankList" :key="index">
                            <span></span>
                            <span><img v-lazy="item.assistanceHeadImg" alt=""></span>
                            <span>{{ item.assistanceNickname}}</span>
                            <span>{{item.createTime | getFullTimes}}</span>
                        </li>
                        <li class="no_more_data" v-show="!isShowLoadingIcon">没有更多数据了</li>
                    </ul>
                </div>
            </div>
            <div class="return">
                <img src="http://assets.rurushishi.com/activies/tjkeppel/return.png" alt="" @click="returns">
            </div>
        </div>
        <div class="friend" v-show="!ispersonal">
            <div class="friTit">
                <span><img :src="friendHeadImg" alt="" style="width:.8rem; border-radius: 50%">{{fnickname}}的图片</span>
                <span class="more">
                    <img src="http://assets.rurushishi.com/activies/tjkeppel/morebtn.png" alt="" @click="mores">
                </span>
            </div>
            <div class="friendImg">
                <img :src="friendImg" alt="">
            </div>
            <p>请拜托一定要为我投票加油呦</p>
            <p>当前的票数{{fassistanceCount}}</p>
            <div class="fribtns">
                <img src="http://assets.rurushishi.com/activies/tjkeppel/vote.png" alt="" @click='vote'>
                <img src="http://assets.rurushishi.com/activies/tjkeppel/helpvote.png" alt="" @click="helpvote">
            </div>
            <div class="return">
                <img src="http://assets.rurushishi.com/activies/tjkeppel/return.png" alt="" @click="returns">
            </div>
        </div>
         <div class="masks" v-show='ismasks'>
            <div class="info">
                <p>恭喜你获得至多200元的随机话费！</p>
                <div class="mobile">
                    <input type="text" placeholder="电话" v-model="mobile" @blur="blurInput" @focus="focusClick">
                </div>
                <div class="vcode">
                    <input type="text" placeholder="输入验证码" v-model="vcode" @blur="blurInput" @focus="focusClick">
                    <span v-show="!showVcode" @click="getVcode">{{getVcodes}}</span>
                    <span v-show ="showVcode">{{counts}}s</span>
                </div>
                <div class="btns">
                    <span class="submit" @click="submit">提交</span> 
                    <span class="sclose" @click="sclose">关闭</span>
                </div>  
                <!-- <div class="submit" @click="submit">提 交</div> -->
            </div>
        </div>
        <music></music>
        <share :isshare="isshare"></share>
        <!-- <Bottom :baseText="baseText"></Bottom> -->
    </div>
</template>
<script>
import Cookies from "js-cookie";
import utils from "@/utils/utils";
import { MessageBox} from "mint-ui";
import request from "@/utils/request";
import * as config from "./config";
import music from "./components/music";
import Share from "@/components/common/Share";
// import Bottom from "@/components/common/Bottom";
export default {
    data(){
        return {
            openid: Cookies.get('openid'),
            ispersonal: true, //是否个人主页
            friendImg: '', 
            friendHeadImg: '',
            personalImg: '',
            saveInfo:{
                channel:'',
                nickname: '',
                openid: Cookies.get('openid'),
                reOpenid: '',
                headImg: '',
                six: '',
                personal:String,
            },
            userInfo: null,
            // 接收到的传播信息
            receiveSpreadInfo: {
                channel: 0, //渠道
                fuid: "", //传播者的openid
                ouid: "" //销售或渠道的openid
            },
            isshare: false,//是否分享
            // baseText: config.BASE_TEXT,
            isplay: false,

            loading: true,
            offset:0,
            showTips: false,
            rankList:[],
            pageSize: 20,
            pageIndex: 0,
            isShowLoadingIcon:false,

            isFocus: false,
            mobile: '',
            vcode: '',
            showVcode: false,
            counts: '',
            timer: null,
            getVcodes: '获取验证码',
            ismasks: false,
            isfare: false, //是否领取过话费
            fnickname: '',
            ishelpvote:false,//帮他拉票
            fassistanceCount: 0,
        }
    },
    components:{
        share: Share,
        // Bottom: Bottom,
        music: music
    },
    filters: {
        getFullTimes(time){
           return utils.getFullTime(time)
        } 
    },
    methods:{
        personal(){
            //个人主页
            let _self = this;
            console.log(_self.receiveSpreadInfo.fuid);
            if(_self.receiveSpreadInfo.fuid==_self.openid||_self.saveInfo.personal==2){
                //个人主页
                _self.ispersonal=true;
                _self.userJoinfop();
                _self.loadMore();
            }else{
                _self.ispersonal=false;
                _self.userJoinfof();
                // _self.userJoinfop();
                // _self.userfare();
            }
        },
        userJoinfof(){
            let _self =this;
            console.log(_self.receiveSpreadInfo.fuid)
               request
                .get(`${_self.global.API_TJKEPPEL_ACT_URL}activity/logic/userJoinfo`,
                {
                   openid: _self.receiveSpreadInfo.fuid,
                }).then(function(data){
                    if(!data.data){
                         
                    }else{
                        if(data.data.state==2){
                            _self.friendImg='http://assets.rurushishi.com/web8088/wx0daae6c161e09f35/1558343085000-28.jpeg';
                        }else{
                            _self.friendImg=data.data.displayImg+'?x-oss-process=image/resize,h_400,w_200';    
                        }
                        _self.friendHeadImg = data.data.headImg;
                        _self.fnickname = data.data.nickname?data.data.nickname:'未知';
                        _self.fassistanceCount = data.data.assistanceCount?data.data.assistanceCount:0;
                    } 
                });
            
        },
        userJoinfop(){
            let _self =this;
            request
                .get(`${_self.global.API_TJKEPPEL_ACT_URL}activity/logic/userJoinfo`,
                {
                }).then(function(data){
                    if(!data.data){
                         
                    }else{
                        if(data.data.state==2){
                            _self.personalImg='http://assets.rurushishi.com/web8088/wx0daae6c161e09f35/1558343085000-28.jpeg';
                        }else{
                            console.log(data.data.displayImg)
                            _self.personalImg=data.data.displayImg+'?x-oss-process=image/resize,h_400,w_200';    
                        }
                        // _self.personalImg=data.data.displayImg;
                        // if(data.data.mobile){
                        //     _self.isfare =true;
                        // }
                    } 
                });
        },
        // /activity/logic/getUserPrize是否领取过话费
        userfare(){
            let _self =this;
            request
                .get(`${_self.global.API_TJKEPPEL_ACT_URL}activity/logic/getUserPrize`,
                {
                    prizeCode: 'prize_3',
                }).then(function(data){
                    if(!data.data){
                          _self.isfare =true;
                    }else{
                       
                    } 
                });
        },
         // 保存用户信息/activity/logic/saveUserInfo
       saveUserInfo(){
           let _self = this;
           let query ={
                channel: _self.saveInfo.channel,
                headImg: _self.saveInfo.headImg,
                sex: _self.saveInfo.six,
                nickname: _self.saveInfo.nickname,
                // openid: Cookies.get('openid'),
                referenceOpenid: _self.saveInfo.reOpenid
           }
           let obj =JSON.stringify(query);
            request
                .post(
                    `${_self.global.API_TJKEPPEL_ACT_URL}activity/logic/saveUserInfo`,
                    obj
                )
                .then(function(data) {
                    // resolve(data);
            });
       },
        ///activity/logic/userAssistancePage获取用户助力列表
        reciveList(){
            let _self = this;
            request
                .get(
                    `${_self.global.API_TJKEPPEL_ACT_URL}activity/logic/userAssistancePage`,
                    {
                        offset: _self.pageIndex,
                        openid : _self.saveInfo.openid,
                        size: _self.pageSize,
                        // referenceOpenid: _self.receiveSpreadInfo.fuid
                    }
                )
                .then(function(data) {
                    if(data.code==0){
                        _self.loading = false;
                        _self.pageIndex++;
                        if(data.data.total <= 0){
                            _self.showTips = true
                            _self.loading = true;
                        }else {
                            _self.showTips = false;
                            _self.loading = false;
                            _self.rankList = _self.rankList.concat(data.data.list);
                            if (_self.rankList.length >= data.data.total) {
                                //无更多数据
                                _self.loading = true;
                            }
                        }
                    }
            });
        },
        returns(){
          this.pushUrl('index')
        },
        loadMore() {
            this.reciveList();
        },
        //给他投票/activity/logic/assistanceEveryDay
        vote(){
            MessageBox.alert("活动已结束！")
            // let _self = this;
            // request
            //     .get(
            //         `${_self.global.API_TJKEPPEL_ACT_URL}activity/logic/assistanceEveryDay`,
            //         {
            //             channel: _self.saveInfo.channel,
            //             openid : _self.saveInfo.openid,
            //             beOpenid : _self.receiveSpreadInfo.fuid
            //         }
            //     )
            //     .then(function(data) {
            //         if(data.code==0){
            //             MessageBox.alert("助力成功！", "提示").then(function(){
            //                 // 判断是否领取过话费
            //                 if(_self.isfare){
            //                     //是否在活动区域
            //                     request
            //                         .get(`${_self.global.API_TJKEPPEL_ACT_URL}activity/logic/checkValidIp`, {
            //                         //    openid: _self.saveInfo.openid,
            //                         })
            //                         .then(function(data) {
            //                         if (data.data) {
            //                             _self.ismask = true;
            //                         } else {
            //                             // MessageBox.alert("不在活动区域！", "提示")
            //                         }
            //                         });
            //                     // _self.ismasks=true //弹出填写手机号
            //                 }
                            
            //             });
            //         }
            // });
        },
        //帮他拉票
        helpvote(){
           this.isshare=true;
           this.ishelpvote = true;
           this.init();
        },
        focusClick(e) {
            this.isFocus = true;
            if (utils.browser.versions.ios) {
                setTimeout(function () {
                    e.target.scrollIntoView(true);
                }, 100);
            }
        },
        blurInput(e) {
            this.isFocus = false;
            this.$nextTick(() => {
                if (utils.browser.versions.ios && !this.isFocus) {
                    setTimeout(function () {
                        e.target.scrollIntoView(false);
                    }, 300);
                }
            });
        },
        //获取手机验证码/activity/logic/takeMobileVerifyCode
        getActPhoneVCode(){
            const _self = this;
            if(!_self.mobile){
                return MessageBox.alert("请输入手机号", "提示");
            }else{
                request
                    .get(
                        `${_self.global.API_TJKEPPEL_ACT_URL}activity/logic/takeMobileVerifyCode`,
                        {
                            mobile: _self.mobile
                        }
                    )
                    .then(function(data) {
                        
                });
            }
        },

        getVcode(){
            const _self = this;
            const TIME_COUNT = 60;
            _self.getActPhoneVCode();
            if(!_self.timer&&_self.mobile){
                _self.counts = TIME_COUNT;
                _self.showVcode = true;
                _self.timer = setInterval(()=>{
                    if(_self.counts>0&&_self.counts<=TIME_COUNT){
                        _self.counts--;
                    }else{
                        _self.showVcode = false;
                        _self.getVcodes = '重新获取';
                        clearInterval(_self.timer);
                            _self.timer = null;
                    }
                },1000)
            }   
        },
        //提交手机号
        submit(){
            let _self = this;
            if (!_self.mobile) {
                    return MessageBox.alert("请输入手机号", "提示");
                } else {
                    if (!utils.isMobile(_self.mobile)) {
                        return MessageBox.alert("请填写正确的手机号", "提示");
                    }
            }
            if (!_self.vcode) {
                    return MessageBox.alert("请输入验证码", "提示");
                }
            let query={
                        mobile:_self.mobile,
                        verCode:_self.vcode,
                        prizeCode: 'prize_3'
                    };
            let obj = JSON.stringify(query);   
            request
                .post(
                    `${_self.global.API_TJKEPPEL_ACT_URL}activity/logic/takeTelFareAndCheckVCode`,
                    obj
                )
                .then(function(data) {
                    MessageBox.alert("话费稍后会发送到你的手机！", "提示").then(function(){
                        config.addUserInfoWithPhoneAndBindRegister(
                            _self.receiveSpreadInfo.ouid,
                            _self.openid,
                            _self.mobile,
                            name
                        );
                        _self.ismasks=false;
                    });
          });
        },
        sclose(){
           this.ismasks= false;
        },
        mores(){
            this.pushUrl('index')
        },
        pushUrl(page) {
            // 带上本页面的传播信息
            let url = "";
            let fullPathNoShare = this.$route.fullPath;
            fullPathNoShare = fullPathNoShare.replace("?isshare=1", "");
            fullPathNoShare = fullPathNoShare.replace("&isshare=1", "");
            fullPathNoShare = fullPathNoShare.replace("?personal=2", "");
            fullPathNoShare = fullPathNoShare.replace("&personal=2", "");
            fullPathNoShare = fullPathNoShare.replace("?personal="+this.receiveSpreadInfo.fuid, "");
            fullPathNoShare = fullPathNoShare.replace("&personal="+this.receiveSpreadInfo.fuid, "");
            if (fullPathNoShare.indexOf("?") > -1) {
                url = page + "?" + fullPathNoShare.split("?")[1];
            } else {
                url = page;
            }
            this.$router.push("/" + url);
        },
         shareCallBack(){
            let _self = this;
            let query={
                        channel: _self.saveInfo.channel,
                        openid : _self.saveInfo.openid,
                        prizeCode: 'prize_1',
                        referenceOpenid: _self.saveInfo.reOpenid
                    };
            let obj = JSON.stringify(query); 
            request
                .post(
                    `${_self.global.API_TJKEPPEL_ACT_URL}activity/logic/share`,
                    obj,{needDealEx:false}
                )
                .then(function(data) {
                    if(data.code==0){
                        this.isshare=false;
                    }
            });
       },
       init() {
            let that = this;
            // 设置传播信息
            
            if (this.$route.query.channel)
                this.receiveSpreadInfo.channel = this.$route.query.channel;
                this.saveInfo.channel = this.$route.query.channel;
            if (this.$route.query.fuid){
                this.receiveSpreadInfo.fuid = this.$route.query.fuid;
                this.saveInfo.reOpenid = this.$route.query.fuid;
            }
            // let fullPathNoShare = this.$route.fullPath;
            if(this.$route.query.personal==2){
                this.saveInfo.personal=this.$route.query.personal;
            }else if(this.$route.query.personal){
                this.receiveSpreadInfo.fuid = this.$route.query.personal;
                // fullPathNoShare = fullPathNoShare.replace("?personal="+this.receiveSpreadInfo.fuid, "");
            }
                
            if (this.$route.query.ouid)
                this.receiveSpreadInfo.ouid = this.$route.query.ouid;
            if (this.$route.query.isshare) that.isshare = true;
            config.getUserInfo().then(function(userInfo) {
                that.userInfo = userInfo;
                // 设置分享 标题 链接 回调
                let shareObj = {
                    title: "",
                    link: ""
                };
                if (
                that.userInfo &&
                that.userInfo.user &&
                that.userInfo.user.nickname
                ) {
                that.saveInfo.nickname = that.userInfo.user.nickname;
                that.saveInfo.six = that.userInfo.user.six;
                that.saveInfo.headImg = that.userInfo.user.headimgurl;
                shareObj.title = `${
                    that.userInfo.user.nickname
                }，正在参加吉宝美图征集计划，快来给我投一票吧！`;
                }
                if(that.ishelpvote){ //帮他拉票
                    shareObj.title = `帮我为${
                        that.fnickname
                    }拉票，520告白日｜怦然心动，你的“美”一刻”`;
                    if (that.userInfo.salerOrAgent) {
                    // 是销售或者渠道,更新ouid
                    shareObj.link = `${config.SHARE_LINK}?channel=${
                        that.receiveSpreadInfo.channel
                    }&fuid=${that.receiveSpreadInfo.fuid}&ouid=${that.receiveSpreadInfo.ouid}`;
                    } else {
                    shareObj.link = `${config.SHARE_LINK}?channel=${
                        that.receiveSpreadInfo.channel
                    }&fuid=${that.receiveSpreadInfo.fuid}${
                        that.receiveSpreadInfo.ouid
                        ? "&ouid=" + that.receiveSpreadInfo.ouid
                        : ""
                    }`;
                    }
                }else{
                    if (that.userInfo.salerOrAgent) {
                    // 是销售或者渠道,更新ouid
                    shareObj.link = `${config.SHARE_LINK}?channel=${
                        that.receiveSpreadInfo.channel
                    }&fuid=${that.openid}&ouid=${that.openid}`;
                    } else {
                    shareObj.link = `${config.SHARE_LINK}?channel=${
                        that.receiveSpreadInfo.channel
                    }&fuid=${that.openid}${
                        that.receiveSpreadInfo.ouid
                        ? "&ouid=" + that.receiveSpreadInfo.ouid
                        : ""
                    }`;
                    }
                }
                
                that.saveUserInfo();
                that.personal();
                config.initShare(shareObj);
                that.global.SHARE_CALLBACK_OK = function(type) {
                that.shareCallBack();
                };
            });   
        }
    },
    created() {
        this.init();
        this.userfare();
    },
    mounted(){
        
    }

}
</script>
<style lang='stylus' scoped>
.keppel{
    position absolute
    top 0
    left 0
    right 0
    bottom 0
    width 100%
    height 100%
    background url(http://assets.rurushishi.com/activies/tjkeppel/main.jpg) no-repeat
    background-size 100% 100%
}
.personal{
    width 100%
}
.personalTit{
    padding-top .8rem
    padding-bottom .1rem
    width 100%
    text-align center
}
.personalTit>img{
    width 2.72rem
    height .86rem
}
.personalImg{
    width 5rem
    height 3rem
    margin 0 auto
    background #fff
}
.personalImg>img{
    width 100%
    height 100%
}
.personal>p{
    text-align center
    color #ffffff
    font-size .28rem
    height .5rem
    line-height .5rem
}
.perFriendList{
    width 100%
    height 2rem
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.return{
    width 100%
    text-align center
}
.return>img{
    width 3.14rem
    height .93rem
}
.friend{
    width 100%
}
.friTit{
    padding-top 1rem
    padding-bottom .3rem
    width 90%
    margin 0 auto 
    display flex
    justify-content space-between
}
.friTit .more{
    width 2.23rem
    height .73rem
}
.friTit>span{
    display block
    height .73rem
    line-height .73rem
    color #fff
}
.friTit .more>img{
    width 100%
    height 100%
}
.friendImg{
    width 5rem
    height 3rem
    background #ffffff
    margin 0 auto
}
.friendImg>img{
    width 100%
    height 100%
}
.friend>p{
    width 100%
    line-height .5rem
    height .5rem
    text-align center
    color #ffffff
    font-size .28rem
}
.fribtns{
    padding-top .5rem
    padding-bottom .3rem
    width 80%
    height .73rem
    margin 0 auto 
    display flex
    justify-content space-between
}
.fribtns>img{
    width 2.23rem
    height .73rem
}
.masks{
    position fixed
    top 0
    left 0
    height 100%
    width 100%
    background #000
    opacity .9
    z-index 6
}
.info {
    background #47ab08
    width: 80%
    padding .5rem 0
    margin-left 10%
    margin-top 40%
}
.info>p{
    width 100%
    font-size: .28rem
    color #ffffff
    text-align center
}
.vcode{
    margin .2rem auto
    height: .8rem
    width: 70%
    border 1px solid #fff
    border-radius .2rem
}
.vcode>input{
    width 50%
}
.vcode>span{
    display inline-table
    line-height .8rem
    width 42% 
    font-size .32rem
    height: .8rem
    color #fff
    text-align center
}
.info .mobile {
    margin .2rem auto
    height: .8rem
    width: 70%
    border 1px solid #fff
    border-radius .2rem
}

input {
    color: #fff;
    width: 92%
    padding-left: 6%;
    height: .8rem;
    line-height: .8rem;
    background-color transparent
    border none
}
.btns{
    display flex
    justify-content space-around
}
.btns .submit {
    width: 30%
    background-color #da9d55
    border-radius .4rem
    font-size .32rem
    height .8rem
    margin .2rem auto
    text-align center
    line-height .8rem
    color #fff
}
.btns .sclose{
    width: 30%
    background-color #da9d55
    border-radius .4rem
    font-size .32rem
    height .8rem
    margin .2rem auto
    text-align center
    line-height .8rem
    color #fff
}
.rank>ul {
  height: 3rem;
  width: 90%;
  margin: 0 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.rank>ul>li {
  display: flex;
  border-bottom: 1px solid #cacaca;
}

.rank>ul>li>span {
  height: 1rem;
  text-align: center;
  line-height: 1rem;
}

.rank>ul>li>span:nth-child(1) {
  width: 5%;
  color: #feca00;
}

.rank>ul>li>span:nth-child(2) {
  width: 20%;
}
.rank>ul>li>span:nth-child(3) {
  width: 30%;
  overflow hidden
  color: #fff;
  font-size: 0.26rem;
  dispaly: flex;
}

.rank>ul>li>span:nth-child(3)>span {
  line-height: 0.4rem;
  display: block;
  text-align: left;
}

.rank>ul>li>span:nth-child(3)>span:nth-child(1) {
  width: 100%;
  margin-top: 0.3rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rank>ul>li>span:nth-child(3)>span:nth-child(2) {
  font-size: 0.25rem;
}

.rank>ul>li>span:nth-child(4) {
  width: 40%;
  color: #ffffff;
  font-size: 0.26rem;
}

.rank>ul>li>span>img {
  width: .8rem;
  height: .8rem;
  border-radius: 50%;
  border: 2px solid #feca00;
}
.no_more_data {
  border-bottom: none !important;
  color: #ffffff;
  width: 100%;
  text-align: center;
  justify-content: center;
  padding-top: 20px;
}
</style>

